import {Component, EventEmitter, NgZone} from "angular2/core";

interface JQuery {
	cropper():any;
}

/**
 * CropperComponent
 */
@Component({
    selector: "cropper-cmp",
    template: `
      <!-- Modal -->
      <div class="modal fade" id="myCropperModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="btnClose()"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
              <div style="text-align: center; height: 200px; line-height: 200px; overflow: hidden;">
                <img id="cropperImage" [src]="imgUrl" (load)="imgOnLoad()">
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal" (click)="btnClose()">Close</button>
              <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="btnSave()">Save changes</button>
            </div>
          </div>
        </div>
      </div>
	`
})
export class CropperComponent {
    imgUrl = "";
    notify = new EventEmitter();

    constructor(private _ngZone: NgZone) { }

    imgOnLoad() {
        console.log('----imgOnLoad');
        // $('#cropperImage').cropper({
        //     aspectRatio: 16 / 9,
        //     crop: function(e: any) {
        //         // Output the result data for cropping image.
        //         console.log(e.x);
        //         console.log(e.y);
        //         console.log(e.width);
        //         console.log(e.height);
        //         console.log(e.rotate);
        //         console.log(e.scaleX);
        //         console.log(e.scaleY);
        //     }
        // });
    }

    showCropper(blob: any, options: any): EventEmitter<string> {
        // var reader = new FileReader();
        // var self = this;
        // reader.onload = function(e: Event) {
        //     self.imgUrl = e.target.result;
        // };
        // reader.readAsDataURL(blob);

        // // this.imgUrl = "yy.jpg";

        // $('#myCropperModal').modal('show');

        return this.notify;
    }
    
    destroyCropper() {
        // $('#cropperImage').destroy();
    }

    btnClose() {
        // this.notify.error('some error ocused.');
    }

    btnSave() {
        //  this.notify.emit('ok');
    }
}